<template>
  <edit-layout ref="layout" :page="page" :form="form" @invoke="invoke">
    <el-form ref="form" :model="form" :size="page.settings.formSize" :label-width="page.settings.labelWidth">
      <div v-if="form.id!=null">
        <el-divider content-position="left">基本信息</el-divider>
        <el-row class="row-bg">
          <el-col :span="8">
            <el-form-item label="退货单号：">
              <label>{{ form.no }}</label>
              <el-tag :type="orderStatus.type" size="mini" effect="plain">{{ orderStatus.label }}</el-tag>
              <el-tag v-if="form.flag===1" size="mini" effect="plain" type="danger">驳回</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商：">
              <label>{{ form.supplierName }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="接货员：">
              <employee-card v-model="form.consignee" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-bg">
          <el-col :span="8">
            <el-form-item label="退货量：">
              <label><span class="money">{{ form.quantity }}</span> 吨</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退货金额：">
              <label class="money">￥{{ form.totalAmount.toFixed(2) }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="打包数：">
              <label><span class="money">{{ form.packages }}</span> 包</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-bg">
          <el-col :span="8">
            <el-form-item label="创建人：">
              <label>{{ form.creator }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间：">
              <label>{{ form.createTime }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="更新时间：">
              <label>{{ form.updateTime }}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注：" prop="remark">
          <el-input v-model="form.remark" class="col-6" type="textarea" :rows="2" placeholder="请输入备注" />
        </el-form-item>

        <el-divider content-position="left">收货信息</el-divider>
        <el-row class="row-bg">
          <el-col :span="8">
            <el-form-item label="收货点：">
              <label>{{ form.orderLocation.name }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货人：">
              <label>{{ form.orderLocation.linkman }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式：">
              <label>{{ form.orderLocation.mobile }}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-bg">
          <el-col :span="8">
            <el-form-item label="省市区：">
              <label>{{ form.orderLocation.area }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="详细地址：">
              <label>{{ form.orderLocation.address }}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <pur-consignee v-if="form.status>=2" v-model="form.id" />
      </div>
      <div class="details">
        <el-tabs value="detail" type="border-card">
          <el-tab-pane label="货品明细" name="detail">
            <div class="bg" />
            <table v-if="form.details" cellspacing="0" cellpadding="0">
              <thead>
                <tr>
                  <th class="index">#</th>
                  <th>货品</th>
                  <th>退货量(吨)</th>
                  <th>打包数</th>
                  <th style="text-align:right">单价/吨</th>
                  <th style="text-align:right">小计</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in form.details " :key="index">
                  <td class="index">{{ index+1 }}</td>
                  <td>
                    <label>{{ item.name }}</label>
                  </td>
                  <td>
                    <el-form-item :prop="'details.' + index + '.quantity'" :rules="page.rules.num" label-width="0px">
                      <el-input-number v-model="item.quantity" :disabled="form.status!=0" size="mini" controls-position="right" :precision="3" :min="1" @change="(c,o)=>calItem(item)" />
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item :prop="'details.' + index + '.packages'" :rules="page.rules.num" label-width="0px">
                      <el-input-number v-model="item.packages" size="mini" controls-position="right" :min="1" @change="(c,o)=>calItem(item)" />
                    </el-form-item>
                  </td>
                  <td>
                    <label class="money">￥{{ item.price.toFixed(2) }}</label>
                  </td>
                  <td>
                    <el-form-item :prop="'details.' + index + '.money'" :rules="page.rules.num" label-width="0px">
                      <label class="money">￥{{ item.money.toFixed(2) }}</label>
                    </el-form-item>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-tab-pane>

        </el-tabs>
      </div>
    </el-form>

  </edit-layout>
</template>
<script>
import adminSupport from 'lola-admin-support-el'
export default {
  name: 'PurReturnOrderManageEdit',
  components: {

  },
  mixins: [adminSupport.mixins.edit],
  data() {
    return {
      name: 'PurReturnOrderManage',
      orderStatus: null,
      self: null,
      settleQuantity: 0
    }
  },
  mounted() {
    this.init()// 初始化
  },
  methods: {
    init() {
      const that = this
      this.self = that
      that.page.ids.push(this.$route.params.no)// 页面主参数赋值
      that.loadData()// 加载数据
    },
    appendForm() {
      this.orderStatus = this.$constants.supReturnStatus.get(this.form.status)
    }, buildForm() {
      return true
    },
    minus(index) { // 删除明细
      this.form.details.splice(index, 1)
    },
    calItem(item) {
      // console.log(item)
      // 计算小计
      item.money = item.quantity * item.price
      this.cal()
    },
    cal() {
      // 计算订单总额
      let quantity = 0 // 订单退货量
      let totalAmount = 0 // 退货总金额
      this.form.details.forEach(item => {
        quantity += item.quantity
        totalAmount += item.money
      })
      this.form.quantity = quantity
      this.form.totalAmount = totalAmount
    },
    buildOtherBtn(item, btn) { // 调整权限按钮
      switch (item.code) {
        case 'm0000': // 保存
        {
          btn.disable = this.form.status === 0
          break
        }
        case 'm5275': // 发货
        {
          btn.disable = this.form.status === 0
          btn.opt = 'checking'
          break
        }
        case 'm5276': // 收货
        {
          btn.disable = this.form.status === 1
          btn.opt = 'eceiving'
          break
        }
        case 'm5277': // 取消
        {
          btn.disable = this.form.status === 0
          btn.opt = 'canceling'
          break
        }
      }
      console.log(btn)
    },
    checking() { // 发货操作
      const that = this
      const url = that.page.router.remoteUrl + '/checking/' + that.form.id
      that.$confirm('确认退货单发货, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.postChange(url)
      }).catch(() => {})
    },
    eceiving() { // 收货操作
      const that = this
      const url = that.page.router.remoteUrl + '/eceiving/' + that.form.id
      that.$confirm('确认供应商已收货, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.postChange(url)
      }).catch(() => {})
    },
    canceling() { // 收货操作
      const that = this
      const url = that.page.router.remoteUrl + '/canceling/' + that.form.id
      that.$confirm('确认取消当前退货单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.postChange(url)
      }).catch(() => {})
    },
    postChange(url) {
      const that = this
      const loading = that.$loading()
      that.service.post(url, {}).then(res => {
        loading.close()
        if (res.code !== 200) {
          that.$message.error(res.message)
          return
        }
        that.$message.success('操作成功!')
        that.reload(true)
      }).catch((e) => {
        loading.close()
      })
    }
  }
}
</script>
